<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>菜单列表</title>
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <h3 class="big-tit">菜谱列表</h3>
  <ul class="list-box">

  </ul>
  <p class="more">数据正在加载中...</p>
  <p class="noinfo">没有数据了...</p>
</body>
<script src="../jquery.js"></script>
<script>
  
  $(function () {
let k=[]
let id=[]
    // $.ajax({
    //   method: 'get',
    //   url: 'http://124.223.14.236:3001/api/recipeInfo/620813',
    //   success(res) {
    //     console.log(res);
    //   }
    // })


    $.ajax({
      method: 'get',
      url: 'http://124.223.14.236:3001/api/recipeInfo?recipe_id=6251654',
      success({ data }) {
        data=data.splice(10,10)
        // console.log(data);
        let n = data.map(item => {
          id.push(item.id)
          return `
          <li>
              <a href="./info.html">
                <img src="http://124.223.14.236:3001/public/${item.img}" title="${item.description}" />
                <h3>${item.title}</h3>
              </a>
            </li>
          `
        }).join('')
        $('.list-box').html(n)
        localStorage.setItem('kk',JSON.stringify(data))
        $('.list-box').on('click','li',function(e){
            localStorage.setItem('id',id[$(this).index()])
            localStorage.setItem('imgs',$(this).find('img').attr('src'))
           
        })
      }
    })
    $.ajax({
    method:'get',
    url:`http://124.223.14.236:3001/api/recipe`,
    success({data}){
      console.log(data);
      data.list.forEach(element => {
        k.push(element.id)
      });
         $('.list-box').on('click','li',function(e){
            localStorage.setItem('k',k[$(this).index()])
        })
    }
  })
  })
</script>

</html>